<template>
  <div class="containers">
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" icon="el-icon-plus" class="handle-add mr10" @click="addregion"
          size="small">添加</el-button>
        <el-input v-model="keyword" placeholder="分类名称" class="handle-input mr10" size="small"></el-input>
        <el-select v-model="code" placeholder="请选择竞价类型" size="small" class="mr10" @change="form.position=''">
            <el-option v-for="(item, index) in options" :key="item.id" :label="item.key" :value="item.id"></el-option>
          </el-select>
        <el-button type="primary" icon="el-icon-search" @click="getData" class="mr10" size="small">搜索</el-button>
      </div>

      <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header"
        @selection-change="handleSelectionChange" v-loading="loading">
        <el-table-column label="竞价类型" align="center">
          <template slot-scope="scope">
            {{ options[scope.row.code].key }}
          </template>
        </el-table-column>
        <el-table-column label="竞价位置" align="center">
          <template slot-scope="scope">
            {{ optionss[scope.row.position].key }}
          </template>
        </el-table-column>
        <el-table-column prop="money" label="竞价积分"></el-table-column>
        <el-table-column label="竞价图片" align="center">
          <template slot-scope="scope">
            <el-image class="table-td-thumb" :src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="goods.name" label="商品名称"></el-table-column>
        <el-table-column label="商品图片" align="center">
          <template slot-scope="scope">
            <el-image class="table-td-thumb" :src="scope.row.goods.img"
              :preview-src-list="[scope.row.goods.img]"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="addBiddings(scope.row.ID)">增加竞价</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
          :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>

    <!-- 编辑/添加弹出框 -->
    <el-dialog :title="type ? '编辑' : '添加'" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="竞价类型">
          <el-select v-model="form.code" placeholder="请选择竞价类型" size="small" class="mr10" @change="form.position=''">
            <el-option v-for="(item, index) in options" :key="item.id" :label="item.key" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="广告位置" v-if="form.code==0">
          <el-select v-model="form.position" placeholder="请选择广告位置" size="small" class="mr10">
            <el-option v-for="(item, index) in optionss" :key="item.id" :label="item.key" :value="item.id" v-if="index==0||index==1||index==2&&form.code==0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="广告位置" v-if="form.code==1">
          <el-select v-model="form.position" placeholder="请选择广告位置" size="small" class="mr10">
            <el-option v-for="(item, index) in optionss" :key="item.id" :label="item.key" :value="item.id" v-if="index==1||index==3&&form.code==1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="展示图片" v-if="form.position == 1">
          <el-upload class="avatar-uploader" :action="upload + '/'" :show-file-list="false" :data="upimg"
            :on-success="handleAvatarSuccess" :before-upload="beforeupload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus el-icon-plusUPLOAD" style="line-height: 90px;text-align: center;"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="竞价余额"><el-input v-model="form.money" type="Number"></el-input></el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 选择商品 -->
    <el-dialog title="选择商品" :visible.sync="showboxgoods" width="50%" @close='showboxgoods = false'>
      <el-input v-model="keywords" placeholder="名称" class="handle-input mr10"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="getDatas">搜索</el-button>

      <el-form ref="form" :model="form" label-width="100px" style="margin-top: 20px;">
        <el-table :data="tableDatas" border class="table" ref="multipleTable" header-cell-class-name="table-header"
          @selection-change="handleSelectionChange" @row-click="getrows">
          <el-table-column label="选择" width="80" fixed>
            <template slot-scope="scope">
              <el-radio class="radio" v-model="templateSelection_ids" :label="scope.row.ID">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="ID" label="ID" align="center" width="80"></el-table-column>
          <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
          <el-table-column label="展示图片" align="center">
            <template slot-scope="scope">
              <el-image class="table-td-thumb" :src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <el-button type="primary" @click="btnuser(scope.row.ID)">选择此商品</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination background layout="total, prev, pager, next" :current-page="querys.pageIndex"
            :page-size="querys.pageSize" :total="pageTotals" @current-change="handlePageChanges"></el-pagination>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'basetable',
  data() {
    return {
      options: [{ key: '商品', id: 0 }, { key: '店铺', id: 1 }], // 下拉选项
      optionss: [{ key: '首页商品', id: 0 }, { key: '首页轮播', id: 1 }, { key: '商家联盟页面商品', id: 2 }, { key: '商家', id: 3 }],
      form: {
        code: 0,
        position: 0,
        url: '',
        img: '',
        goods_id: 0,
        money: 0
      },
      query: {
        pageIndex: 1,
        pageSize: 20
      },
      querys: {
        pageIndex: 1,
        pageSize: 20
      },
      upimg: {
        token: '',
        key: new Date().valueOf()
      },
      code: 0,
      upload: '',
      keyword: '',
      keywords: '',
      tableData: [],
      tableDatas: [],
      multipleSelection: [],
      editVisible: false,
      showboxgoods: false,
      pageTotal: 0,
      pageTotals: 0,
      imageUrl: '',
      type: 0,
      loading: false,
      templateSelection_ids: 0
    };
  },
  created() {
    this.request('business/modify_info/', 'get', {}).then(res => {
      this.id = res.data.ID
    })
    this.getToken().then(res => {
      this.upimg.token = res.data.token
      this.url = res.data.url
      this.upload = res.data.upload
      console.log(res)
    },
      function () {
        console.log('请求失败处理');
      }
    )
    this.getData()
    this.getDatas()
  },
  methods: {
    btnuser(id) {
      this.form.goods_id = id
      if (this.form.position == 1) {
        this.form.url = '/pages/commodity/details?id=' + id
      }
      this.addBidding()
    },
    addBidding() {
      this.form.money = Number(this.form.money)
      this.request('business/addBidding/', 'post', this.form).then(res => {
        this.editVisible = false;
        this.showboxgoods = false;
        this.form = {
          code: 0,
          position: 0,
          url: '',
          img: '',
          goods_id: 0,
          money: 0
        };
        if (res.errno == 0) {
          this.$message.success(res.errmsg);
          this.getData()
        } else {
          this.$message.error(res.errmsg);
        }
      })
    },
    addBiddings(id) {
      this.$prompt('请输入增加金额', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.request('business/addBidding/', 'PUT', { id: id, money: Number(value) }).then(res => {
          if (res.errno == 0) {
            this.$message.success(res.errmsg);
            this.getData()
          } else {
            this.$message.error(res.errmsg);
          }
        })
      }).catch(() => {

      });
    },
    //获取数据
    getDatas() {
      this.request('business/add_goods/', 'get', { page: this.querys.pageIndex, size: this.querys.pageSize, keyword: this.keywords }).then(res => {
        this.tableDatas = res.data.data
        this.pageTotals = res.data.total
      })
    },
    getrows(row) {//选择
      this.form.bidding = parseInt(row.ID)
    },
    // 上传图片
    handleAvatarSuccess(res, file) {
      this.form.img = this.url + res.key;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeupload(file) {
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
        return false;
      }
      if (file.size / 1024 / 1024 > 1) {
        this.$message.error('上传图标大小不能超过 1M!');
        return false;
      }
      let types = file.name.split('.')//获取图片格式
      this.upimg.key = 'template/home/' + new Date().valueOf() + '.' + types[types.length - 1];
    },
    //获取数据
    getData() {
      this.loading = true
      this.request('business/addBidding/', 'get', { page: this.query.pageIndex, size: this.query.pageSize ,code:this.code}).then(res => {
        console.log(res)
        this.tableData = res.data.data
        this.pageTotal = res.data.total
        this.loading = false
      })
    },
    // 编辑
    handleEdit(e) {
      this.editVisible = true;
      this.form = e;
      this.imageUrl = e.img;
      this.type = 1
    },
    cancel() {
      this.editVisible = false;
      this.form = {
        code: 0,
        position: 0,
        url: '',
        img: '',
        goods_id: 0,
        money: 0
      };
      this.getData();
    },

    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.request('business/addBusinessClass/', 'delete', { ID: row.ID }).then(res => {
            if (res.errno == 0) {
              this.$message.success(res.errmsg);
              this.tableData.splice(index, 1)
              this.getData()
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 添加
    addregion() {
      this.form = {
        code: 0,
        position: 0,
        url: '',
        img: '',
        goods_id: 0,
        money: 0
      };
      this.type = 0
      this.imageUrl = '';
      this.editVisible = true;
    },

    // 添加/修改
    saveEdit() {
      this.editVisible = false;
      if (this.form.position == 1) {
        if (!this.form.img) {
          this.$message.error('请上传图片');
          return
        }
      }

      if (this.form.code == 0) {
        this.showboxgoods = true
      } else {
        // this.form.position=3 
        // this.form.goods_id = this.id
        this.form.url = '/pages/business/businessdetail?id=' + this.id
        this.addBidding()
      }

    },
    handlePageChanges(val) {
      this.$set(this.query1, 'pageIndex', val);
      this.getDatas();
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val);
      this.getData();
    }

  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.el-upload--text {
  width: 200px !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;

  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  /* width: 100px; */
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 178px;
  display: block;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 60px;
  height: 60px;

  .el-image img {
    object-fit: cover;
  }
}

/* 设置分页按钮样式 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}</style>
